<template>
    <div>
      <div class="flex-center mb8">
        <div class="flex-one large-tip bolder-font">{{ $t('outBound.ins') }}</div>
        <el-button type="primary" @click="addRows">{{ $t('common.addRows') }}</el-button>
      </div>
      <TableList
        ref="instructionsTable"
        :columns="instructions_column"
        :data="value"
        :table-key="tableKey"
        :is-pagination="false"
      >
        <el-table-column
          prop="title"
          slot="title"
          :label="$t('order.inst')"
          width="100px"
        >
          <template slot-scope="scope">
            <el-select
              v-if="!scope.row.id"
              v-model="scope.row.title"
              :placeholder="$t('common.placeholderSelect')"
              @change="selectChange(scope.row, scope.$index)"
            >
              <el-option
                v-for="item in InstructionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
            <span v-else>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="files" slot="files" :label="$t('common.fileName')" width="280px">
          <template slot-scope="scope">
            <div v-if="(!scope.row.id && scope.row.template) || scope.row.files">
              <el-upload
                :file-list="fileList"
                :auto-upload="true"
                :action="Url"
                accept=".xlsx,.xls"
                :data="{ row: scope.row }"
                :on-error="handleUploadError"
                :on-success="handleUploadSuccess(scope.row)"
                :headers="{}"
                style="text-align: left"
              >
                <el-button v-if="!scope.row.files" type="text">{{
                  $t("common.upload")
                }}</el-button>
                <el-tooltip
                  v-else
                  class="item"
                  effect="dark"
                  :content="scope.row.fileName"
                  placement="bottom-end"
                >
                  <span>{{ filterFileName(scope.row.fileName) }}</span>
                </el-tooltip>
              </el-upload>
            </div>
            <div v-if="scope.row.id && scope.row.files">
              <el-tooltip
                v-if="scope.row.files"
                class="item"
                effect="dark"
                :content="scope.row.files"
                placement="bottom-end"
              >
                <span>{{ filterFileName(scope.row.files) }}</span>
              </el-tooltip>
              <span v-else>-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          slot="remarks"
          prop="remarks"
          :label="$t('common.remark')"
          width="160"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.editRows">
              <el-input v-model="scope.row.remarks" clearable></el-input>
            </div>
            <span v-else>{{ scope.row.remarks }}</span>
          </template>
        </el-table-column>
        <el-table-column
          slot="warehouseRemark"
          prop="warehouseRemark"
          :label="$t('common.warehouseRemark')"
          width="160"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.editRows">
              <el-input v-model="scope.row.warehouseRemark" clearable></el-input>
            </div>
            <span v-else>{{ scope.row.warehouseRemark }}</span>
          </template>
        </el-table-column>
        <el-table-column slot="status" prop="status" :label="$t('common.status')">
          <template slot-scope="scope">
            <!-- scope.row.status !== 'FINISH' &&  -->
            <el-select
              v-if="scope.row.editRows && scope.row.status !== '已执行'"
              v-model="scope.row.status"
              :placeholder="$t('common.placeholderSelect')"
              @change="changeStatus(scope.row.status, scope.row.id)"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receiptFile" slot="receiptFile" :label="$t('common.receiptFile')" width="280px">
          <template slot-scope="scope">
            <el-upload
              :file-list="fileList1"
              :auto-upload="true"
              :action="Url"
              accept=".xlsx,.xls"
              :data="{ row: scope.row }"
              :on-error="handleUploadError1"
              :on-success="handleUploadSuccess1(scope.row)"
              :headers="{}"
              style="text-align: left"
            >
              <el-button v-if="!scope.row.receiptFile" type="text">{{
                $t("common.upload")
              }}</el-button>
              <el-tooltip
                v-else
                class="item"
                effect="dark"
                :content="scope.row.receiptFile"
                placement="bottom-end"
              >
                <span>{{ filterFileName(scope.row.receiptFile) }}</span>
              </el-tooltip>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          slot="operation"
          :label="$t('common.operation')"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <div v-if="scope.row.files">
              <el-tag
                size="small"
                type="success"
                style="margin-right: 10px"
                @click="viewImg(scope.row.files, scope.$index)"
              >
                <i class="el-icon-view" />
                查看
              </el-tag>
              <el-tag
                size="small"
                @click="
                  downLoad(
                    scope.row.files,
                    scope.row.fileName || scope.row.fileName
                  )
                "
              >
                <i class="el-icon-download" />
                下载
              </el-tag>
            </div> -->
            <template v-if="!scope.row.editRows">
              <el-button type="text" @click="editableRows(scope.row)">{{
                $t("common.edit")
              }}</el-button>
            </template>
            <template v-if="scope.row.editRows">
              <!-- <el-button type="text" @click="saveEditRows(scope.row)">{{ -->
              <el-button type="text" @click="beforeSaveEditRows(scope.row)">{{
                $t("common.save")
              }}</el-button>
              <el-button type="text" @click="cancelSave(scope.row)">{{
                $t("common.cancel")
              }}</el-button>
            </template>
          </template>
        </el-table-column>
      </TableList>
      <el-dialog :visible.sync="beforeEditVisible" :title="$t('common.placeholderSelect')" width="300px">
        <el-select v-model="supplierId" :placeholder="$t('common.placeholderSelect')" @focus="getSupplierOptions">
          <el-option v-for="item in supplierOptions" :key="item.id" :label="item.customerName" :value="item.id"></el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleDialogConfirm">{{ $t('common.confirm') }}</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import TableList from "@/components/Table/list.vue";
  import { changeInstruct, addInstruct } from "@/api/order/index.js";
  import { customerServiceList } from "@/api/wms/supplier";
  import instructions_mix from './mix.js'
  export default {
    components: { TableList },
    mixins: [instructions_mix],
    props: {
      dataList: {
        type: Array,
        default: () => [],
      },
      shipmentOrderId: {
        type: String | Number,
        default: null
      },
      // 上传回执显隐
      receiptShow: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      dataList: {
        handler(v) {
          if (v) {
            this.value = v;
          }
        },
        immediate: true,
      },
    },
    computed: {
      instructions_column() {
        return [
          {
            prop: "title",
            slot: "title",
            label: this.$t("order.inst"),
            width: "40px",
          },
          { prop: "files", slot: "files", label: this.$t('common.fileName'), width: "180px" },
          { prop: "remarks", slot: "remarks", label: this.$t("common.remark") },
          {
            prop: "warehouseRemark",
            slot: "warehouseRemark",
            label: this.$t("common.warehouseRemark"),
          },
          { prop: "status", slot: "status", label: this.$t("common.status") },
          { prop: "receiptFile", slot: "receiptFile", label: this.$t("common.receiptFile") },
          {
            prop: "operation",
            slot: "operation",
            label: this.$t("common.operation"),
          },
        ];
      },
    },
    data() {
      return {
        value: [],
        tableKey: true,
        // 指令状态列表
        statusList: [
          { value: "FINISH", label: this.$t('inst.status.finished') },
          { value: "", label: this.$t('inst.status.unfinish') },
        ],
        // 已执行前选择供应商的步骤
        beforeEditVisible: false,
        supplierOptions: [],
        supplierId: null,
        // 单行数据
        rowsObj: null
      };
    },
    methods: {
      getList() {
        this.$emit("getList");
      },
      // 服务供应商列表
      getSupplierOptions() {
        const query = { pageNum: undefined, pageSize: undefined };
        const pageReq = { page: 0, size: 100000 };
        customerServiceList(query, pageReq).then((response) => {
          const { content } = response;
          this.supplierOptions = content;
        });
      },
      // 添加一行
      addRows() {
        this.value.push({
          edit: false,
          editRows: true,
          instructions: "",
          title: "",
          template: "",
          files: "",
          fileName: "",
          remarks: "",
          warehouseRemark: "",
          receiptFile: "",
          receiptFileName: ""
        });
        // 页面数据更新
        this.tableKey = !this.tableKey;
      },
      // 单行编辑
      editableRows(row) {
        row.editRows = true;
        // 页面数据更新
        this.tableKey = !this.tableKey;
      },
      beforeSaveEditRows(rows) {
        this.rowsObj = rows
        this.beforeEditVisible = true
      },
      handleDialogConfirm() {
        if(!this.supplierId) {
          this.$message.warning(this.$t('common.pleaseSelectSupplier'))
        } else {
          this.saveEditRows(this.rowsObj)
        }
      },
      // 单行保存
      saveEditRows(rows) {
        const params = {
          ...rows,
          orderType: rows.remark || rows.orderType,
        };
        const api = rows.id ? changeInstruct : addInstruct;
        // 新建时候把orderID塞进去
        params.orderId = this.shipmentOrderId;
        // 若状态为已执行的时候，新建时候把supplierId：服务供应商id塞进去
        params.supplierId = this.supplierId;
        // console.log('params', params)
        // return
        api({ ...params }).then((res) => {
          if (res) {
            this.$message.success(this.$t('common.succcessInfo'));
            this.cancelSave(rows);
          }
        });
      },
      cancelSave(rows) {
        // 单行编辑状态
        rows.editRows = false;
        rows.edit = true;
        this.beforeEditVisible = false
        setTimeout(() => {
          this.getList();
        }, 300);
      },
      selectChange(row, index) {
        const url = this.InstructionOptions.find(
          (a) => a.label === row.title
        ).fileUrl;
        if (url) {
          this.$refs.instructionsTable.tableData[index].template = url;
        } else {
          this.$refs.instructionsTable.tableData[index].template = null;
        }
      },
      changeStatus(status, id) {
      //   changeInstruct({status: status, id: id}).then(res=>{
      //     console.log('res', res)
      //     this.$message.success('操作成功!')
      //     this.getList()
      //   })
      },
    },
  };
  </script>
  
  <style></style>
  